import { Carousel } from 'antd';

import LbsImg from '@/assets/img/lbs.png';
import NoticeImg from '@/assets/img/notice.png';

export default function NoticeBlock({ notice, active }: any) {
  return (
    <div className="h-[40px] w-full" style={{ borderBottom: '1px solid #e8e9ec' }}>
      <div className="relative left-[50%] ml-[-712px] flex h-[100%] w-[1424px] items-center justify-between">
        <div className="flex flex-1 items-center">
          <img className="mr-[14px] h-[24px] w-[24px]" src={NoticeImg} alt="notice" />
          <div className="mr-[27px]">公告：</div>
          <Carousel effect="fade" dots={false} className="h-[100%] w-[500px]" infinite autoplay>
            {notice.map((item: any, index: number) => {
              return <div key={index}>{item.content}</div>;
            })}
          </Carousel>
        </div>

        <Carousel effect="fade" dots={false} className="h-[100%] w-[500px]" infinite autoplay>
          {active.map((item: string, index: number) => {
            return (
              <div key={index} className="text-right">
                <div className="flex w-[500px] flex-1 justify-end">
                  <img className="mr-[8px] h-[20px] w-[20px]" src={LbsImg} alt="lbs" />
                  <div>最新订单：</div>
                  <div>{item}</div>
                </div>
              </div>
            );
          })}
        </Carousel>
      </div>
    </div>
  );
}
